const { Row, Col, Menu, message, Spin } = antd;
const imgUrl = 'http://api.moodwo.com/public/index.php/picture/index?id=';

let pageDataDemo = [
    {
        block_id : 1,
        block_name: '首页四格',
        banners: [
            {key:1 ,id:205, name:'保税区',width:150, height:150,
                product_home: {
                    max: 3,
                    product_ids: [1,2,3]
                },
                product_group: {
                    max: 3,
                    product_ids: [1,2,3]
                },
                group_product_list :{
                    p_ids: [1],
                    sku: {
                        1:[
                            {
                                sku_id:1281,
                                start_time:1469092592,
                                end_time:1469092592,
                                price:233,
                                display_order:1
                            },
                            {
                                sku_id:1282,
                                start_time:1469092492,
                                end_time:1469092492,
                                price:433,
                                display_order:2
                            }
                        ]
                    }
                }
            },
            {key:2, id:0, name:'搭配购',width:150, height:150},
            {key:3, id:0, name:'特卖汇',width:150, height:150},
            {key:4, id:0, name:'限量购',width:150, height:150}
        ]
    }
];


let pageInfo = {
    page_id: 1,
    page_data: [
        {
            block_id: 1,
            block_name: '首页四格',
            banners: [
                {key:1 ,id:0, name:'保税区',width:150, height:150,
                    group_product_list: {
                        p_ids: [],
                        sku: {
                        }
                    }
                },
                {key:2, id:0, name:'搭配购',width:150, height:150,
                    group_product_list: {
                        p_ids: [],
                        sku: {
                        }
                    }
                },
                {key:3, id:0, name:'特卖汇',width:150, height:150,
                    group_product_list: {
                        p_ids: [],
                        sku: {
                        }
                    }
                },
                {key:4, id:0, name:'限量购',width:150, height:150,
                    group_product_list: {
                        p_ids: [],
                        sku: {
                        }
                    }
                }
            ]
        },
        {
            block_id: 2,
            block_name: '首页单图',
            banners: [
                {key:1, id:0, name: '', width: '100%', height:360,
                    product_group: {
                        max: 3,
                        product_ids: []
                    },
                    group_product_list: {
                        p_ids: [],
                        sku: {
                            
                        }
                    }
                }
            ]
        },
        {
            block_id: 3,
            block_name: '首页六格',
            banners: [
                {key:1, id:0, name: '上左', width: 210, height:210,
                    product_group: {
                        max: 3,
                        product_ids: []
                    },
                    group_product_list: {
                        p_ids: [],
                        sku: {

                        }
                    }
                },
                {key:2, id:0, name: '上中', width: 210, height:210,
                    product_group: {
                        max: 3,
                        product_ids: []
                    },
                    group_product_list: {
                        p_ids: [],
                        sku: {

                        }
                    }
                },
                {key:3, id:0, name: '上右', width: 210, height:210,
                    product_group: {
                        max: 3,
                        product_ids: []
                    },
                    group_product_list: {
                        p_ids: [],
                        sku: {

                        }
                    }
                },
                {key:4, id:0, name: '下左', width: 210, height:210,
                    product_group: {
                        max: 3,
                        product_ids: []
                    },
                    group_product_list: {
                        p_ids: [],
                        sku: {

                        }
                    }
                },
                {key:5, id:0, name: '下中', width: 210, height:210,
                    product_group: {
                        max: 3,
                        product_ids: []
                    },
                    group_product_list: {
                        p_ids: [],
                        sku: {

                        }
                    }
                },
                {key:6, id:0, name: '下右', width: 210, height:210,
                    product_group: {
                        max: 3,
                        product_ids: []
                    },
                    group_product_list: {
                        p_ids: [],
                        sku: {

                        }
                    }
                }
            ]
        },
        {
            block_id: 4,
            block_name: '首页一四图',
            banners: [
                {key:1, id:0, name: '左一大', width: 340, height:440,
                    product_group: {
                        max: 3,
                        product_ids: []
                    },
                    group_product_list: {
                        p_ids: [],
                        sku: {

                        }
                    }
                },
                {key:2, id:0, name: '右左上', width: 160, height:210,
                    product_group: {
                        max: 3,
                        product_ids: []
                    },
                    group_product_list: {
                        p_ids: [],
                        sku: {

                        }
                    }
                },
                {key:3, id:0, name: '右右上', width: 160, height:210,
                    product_group: {
                        max: 3,
                        product_ids: []
                    },
                    group_product_list: {
                        p_ids: [],
                        sku: {

                        }
                    }
                },
                {key:4, id:0, name: '右左下', width: 160, height:210,
                    product_group: {
                        max: 3,
                        product_ids: []
                    },
                    group_product_list: {
                        p_ids: [],
                        sku: {

                        }
                    }
                },
                {key:5, id:0, name: '右右下', width: 160, height:210,
                    product_group: {
                        max: 3,
                        product_ids: []
                    },
                    group_product_list: {
                        p_ids: [],
                        sku: {

                        }
                    }
                }
            ]
        },
        {
            block_id: 5,
            block_name: '首页大图带产品',
            banners: [
                {key:1, id:0, name: '', width: '100%', height:330,
                    product_home: {
                        max: 4,
                        product_ids: []
                    },
                    product_group: {
                        max: 3,
                        product_ids: []
                    },
                    group_product_list: {
                        p_ids: [],
                        sku: {

                        }
                    }
                }
            ]
        }
    ]
};


const Admin_main = React.createClass({
    getInitialState() {
        return {
            current: 'shouye',
            edit_block_data : false,
            loading: false
        };
    },
    handleClick(e) {
        console.log('click ', e);
        this.setState({
            current: e.key
        });
    },
    showBlockSetor(block_data=false){
        if(this.state.edit_block_data){
            this.setState({edit_block_data: false});
            setTimeout(()=>this.setState({edit_block_data: block_data}),100);
            $('html, body').animate({
                scrollTop: 0
            }, 200);
        }else{
            this.setState({edit_block_data: block_data});
        }
    },
    componentDidMount(){
        // if(pageInfo.page_id){
        //     return;
        // }
        this.getPageInfo();
    },
    getPageInfo(){
        let url = getBaseUrl() + '/Admin/AppBanners/getPage';
        let data = {
            id: 1
        };
        this.setState({loading: true});
        _post(url,jQuery.param(data),{
            data_back: function(data){
                if(data.status){
                    if(data.info.page_data.length!=0){
                        pageInfo = data.info;
                    }
                    this.setState({loading: false});
                }else{
                    message.error("获取数据失败");
                    this.setState({loading: false});
                }
            }.bind(this),
            error: function(){
                message.error("获取数据失败");
                this.setState({loading: false});
            }.bind(this)});
    },
    render(){
        const pageData = pageInfo.page_data;
        return(
            <Col span="24">
                <Row>
                    <Col>
                        <Menu onClick={this.handleClick}
                              selectedKeys={[this.state.current]}
                              mode="horizontal">
                            <Menu.Item key="shouye">
                                <a href={getBaseUrl()+'/Admin/AppBanners/index'}>首页</a>
                            </Menu.Item>
                            <Menu.Item key="other">
                                <a href={getBaseUrl()+'/Admin/AppBanners/other'}>其他</a>
                            </Menu.Item>
                        </Menu>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <div className="right-main">
                            <Spin spinning={this.state.loading}>
                                <div className="mobile-wrap">
                                    <div className="head-wrap">
                                        <center>萌屋</center>
                                    </div>
                                    <div className="nav-wrap">
                                        <ul>
                                            <li>首页</li>
                                            <li>奶粉</li>
                                            <li>...</li>
                                        </ul>
                                    </div>
                                    <ul className="block-wrap">
                                        <li>
                                            <div className="block" style={{height: 180}} onClick={()=>this.showBlockSetor(pageData[0])}>
                                                <div className="banner" style={{width:150,height:150,left:40,top:15}}>
                                                    <span>保税区</span>
                                                    {pageData[0].banners[0].id==0 ? null :
                                                        <img src={imgUrl+pageData[0].banners[0].id} />
                                                    }
                                                </div>
                                                <div className="banner" style={{width:150,height:150,left:210,top:15}}>
                                                    <span>搭配购</span>
                                                    {pageData[0].banners[1].id==0 ? null :
                                                        <img src={imgUrl+pageData[0].banners[1].id} />
                                                    }
                                                </div>
                                                <div className="banner" style={{width:150,height:150,left:380,top:15}}>
                                                    <span>特卖汇</span>
                                                    {pageData[0].banners[2].id==0 ? null :
                                                        <img src={imgUrl+pageData[0].banners[2].id} />
                                                    }
                                                </div>
                                                <div className="banner" style={{width:150,height:150,left:550,top:15}}>
                                                    <span>限量购</span>
                                                    {pageData[0].banners[3].id==0 ? null :
                                                        <img src={imgUrl+pageData[0].banners[3].id} />
                                                    }
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div className="block" style={{height:360}} onClick={()=>this.showBlockSetor(pageData[1])}>
                                                <div className="banner" style={{width:'100%',height:360}}>
                                                    {pageData[1].banners[0].id==0 ? null :
                                                        <img src={imgUrl+pageData[1].banners[0].id} />
                                                    }
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div className="block" style={{height:550}} onClick={()=>this.showBlockSetor(pageData[2])}>
                                                <h3>产品分类模块</h3>
                                                <div className="banner" style={{width:210,height:210,left:30,top:50}}>
                                                    <span>上左</span>
                                                    {pageData[2].banners[0].id==0 ? null :
                                                        <img src={imgUrl+pageData[2].banners[0].id} />
                                                    }
                                                </div>
                                                <div className="banner" style={{width:210,height:210,left:260,top:50}}>
                                                    <span>上中</span>
                                                    {pageData[2].banners[1].id==0 ? null :
                                                        <img src={imgUrl+pageData[2].banners[1].id} />
                                                    }
                                                </div>
                                                <div className="banner" style={{width:210,height:210,left:490,top:50}}>
                                                    <span>上右</span>
                                                    {pageData[2].banners[2].id==0 ? null :
                                                        <img src={imgUrl+pageData[2].banners[2].id} />
                                                    }
                                                </div>
                                                <div className="banner" style={{width:210,height:210,left:30,top:280}}>
                                                    <span>下左</span>
                                                    {pageData[2].banners[3].id==0 ? null :
                                                        <img src={imgUrl+pageData[2].banners[3].id} />
                                                    }
                                                </div>
                                                <div className="banner" style={{width:210,height:210,left:260,top:280}}>
                                                    <span>下中</span>
                                                    {pageData[2].banners[4].id==0 ? null :
                                                        <img src={imgUrl+pageData[2].banners[4].id} />
                                                    }
                                                </div>
                                                <div className="banner" style={{width:210,height:210,left:490,top:280}}>
                                                    <span>下右</span>
                                                    {pageData[2].banners[5].id==0 ? null :
                                                        <img src={imgUrl+pageData[2].banners[5].id} />
                                                    }
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div className="block" style={{height:480}} onClick={()=>this.showBlockSetor(pageData[3])}>
                                                <div className="banner" style={{width:340,height:440,left:20,top:20}}>
                                                    <span>leftbig</span>
                                                    {pageData[3].banners[0].id==0 ? null :
                                                        <img src={imgUrl+pageData[3].banners[0].id} />
                                                    }
                                                </div>
                                                <div className="banner" style={{width:160,height:210,left:380,top:20}}>
                                                    <span>r1</span>
                                                    {pageData[3].banners[1].id==0 ? null :
                                                        <img src={imgUrl+pageData[3].banners[1].id} />
                                                    }
                                                </div>
                                                <div className="banner" style={{width:160,height:210,left:560,top:20}}>
                                                    <span>r2</span>
                                                    {pageData[3].banners[2].id==0 ? null :
                                                        <img src={imgUrl+pageData[3].banners[2].id} />
                                                    }
                                                </div>
                                                <div className="banner" style={{width:160,height:210,left:380,top:250}}>
                                                    <span>r3</span>
                                                    {pageData[3].banners[3].id==0 ? null :
                                                        <img src={imgUrl+pageData[3].banners[3].id} />
                                                    }
                                                </div>
                                                <div className="banner" style={{width:160,height:210,left:560,top:250}}>
                                                    <span>r4</span>
                                                    {pageData[3].banners[4].id==0 ? null :
                                                        <img src={imgUrl+pageData[3].banners[4].id} />
                                                    }
                                                </div>

                                            </div>
                                        </li>
                                        <li>
                                            <div className="block" style={{height:600}} onClick={()=>this.showBlockSetor(pageData[4])}>
                                                <div className="banner" style={{width:'100%',height:330}}>
                                                    {pageData[4].banners[0].id==0 ? null :
                                                        <img src={imgUrl+pageData[4].banners[0].id} />
                                                    }
                                                </div>
                                                <div className="banner-sp" style={{width:200,height:250,left:30,top:340}}><span>产品1</span></div>
                                                <div className="banner-sp" style={{width:200,height:250,left:250,top:340}}><span>产品2</span></div>
                                                <div className="banner-sp" style={{width:200,height:250,left:470,top:340}}><span>产品3</span></div>
                                                <div className="banner-sp" style={{width:200,height:250,left:690,top:340}}><span>产品4</span></div>


                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </Spin>
                            {!this.state.edit_block_data ? null : <Block_setor block={this.state.edit_block_data}
                                                                               hide={()=>this.showBlockSetor()}
                                                                               saveBack={this.getPageInfo} />}
                        </div>
                    </Col>
                </Row>
            </Col>
        );
    }
});